<template>
    <el-input maxlength="64" class="show_password" v-model.trim="inValue" v-on="$listeners" v-bind="$attrs" :type="password ? 'password' : 'text'">
        <template slot="suffix">
            <div :class="password ? 'my-eye-hide' : 'my-eye-reveal'" @click="password = !password"></div>
        </template>
    </el-input>
</template>

<script>
export default {
    name: 'WiFiPasswordInput',
    props: {
        value: [String]
    },
    data() {
        return {
            password: true
        };
    },
    computed: {
        inValue: {
            get: function () {
                return this.value;
            },
            set: function (newValue) {
                this.$emit('input', newValue);
            }
        }
    }
};
</script>

<style lang="less" scoped>
@import '@/assets/css/theme_blue/common.less';
.my-eye-hide,
.my-eye-reveal {
    margin: auto;
}

/deep/.el-input__suffix {
    display: flex;
    align-items: center;
    width: 60px;
    justify-content: center;
}
</style>
